<template>
  <div class="index">
    <div class="top2"></div>
    <div class="top2"></div>
    <b-container>
      <b-card-group deck style="color: #666666">
        <b-card title="用户信息" :img-src="imgUser" img-alt="Img" img-top>
          <p class="card-text">修改账户</p>
          <b-button v-on:click="routerToUser" variant="primary">点击进入</b-button>
        </b-card>
        <b-card title="Soulseek" :img-src="imgSoulseek" img-alt="Img" img-top>
          <p class="card-text">P2P音乐下载工具</p>
          <b-button href="http://www.slsknet.org/news/node/1" variant="primary">点击进入</b-button>
        </b-card>
        <b-card title="GreenNode" :img-src="imgShadowsocks" img-alt="Img" img-top>
          <p class="card-text">科学上网工具</p>
          <b-button href="https://cp.greennode.info/" variant="primary">点击进入</b-button>
        </b-card>
        <b-card title="网易云音乐" :img-src="imgMusic" img-alt="Img" img-top>
          <p class="card-text">站长创建的歌单</p>
          <b-button href="https://music.163.com/#/user/home?id=77943184" variant="primary">点击进入</b-button>
        </b-card>
        <b-card title="月球逃生唱片" :img-src="imgMylist" img-alt="Img" img-top>
          <p class="card-text">站长最爱的50张唱片</p>
          <b-button href="https://www.douban.com/doulist/30223/" variant="primary">点击进入</b-button>
        </b-card>
      </b-card-group>
    </b-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: '',
      artistList: [],
      imgUser: require('@/assets/img/user.jpg'),
      imgSoulseek: require('@/assets/img/soulseek.jpg'),
      imgShadowsocks: require('@/assets/img/shadowsocks.jpg'),
      imgMusic: require('@/assets/img/music.jpg'),
      imgMylist: require('@/assets/img/mylist.jpg'),
    };
  },
  head() {
    return {
      title: '用户中心 | 英伦留声机',
    };
  },
  methods: {
    checkStatus() {
      this.$axios
        .get('/api/status/', { params: { showLoading: false, token: true } })
        .then(response => {
          var res = response.data;
          this.code = res.code;
          if (res.code == '401') {
            this.login = false;
            this.$router.push({
              path: '/login',
            });
          } else {
            this.login = true;
            this.user = res.user;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    routerToUser: function() {
      this.$router.push({
        path: '/modify',
        query: {
          id: this.user,
        },
      });
    },
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    //this.checkStatus();
    document.title = '用户中心 | 英伦留声机';
  },
  watch: {
    $route() {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

h4.card-title {
  font-family: Segoe UI, Microsoft Yahei, Verdana, Helvetica Neue, Tahoma, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #000000;
}

.content {
  color: #dddddd;
  padding: 5px;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.8);
}

.content a {
  color: #dddddd;
}

.content a:hover {
  color: #aaaaaa;
}
</style>

<!--<style src="../assets/css/link.css"></style>
<!--<style src="../assets/css/font.css"></style>


